<template>
	<view class="page">
		<div>
			<div class="swiper-outter">
				<div class="logo">
					<!-- <div><img style="width:45px ;height:45px;background-color:#AE00ff ;padding:5px;" :src="splashlogo"></div> -->
				</div>
				<view class="btnwrapper" @click="GoHome" data-cur="go">
					<view class="btn"  >开始装备</view>
				</view>
			</div>
		</div>
		<div  @click="GoHome"  class="swiper-wrapper">
			<div  @click="GoHome" class="swiper-slide" style="top: 0%;">
				<!-- https://sf6-scmcdn-tos.pstatp.com/goofy/ies/douyin_home_web/imgs/mob_1-1.288df5b2.gif					 -->
				<image  @click="GoHome" :style="{width:winWid+'px',height:windH+'px'}" src="https://dscontract.oss-cn-beijing.aliyuncs.com/splash.gif"
				 mode="aspectFill" />
				<div class="text">
					<!-- <div class="title">跑步即信仰</div>
						<div class="line"></div>
						<div class="desc">2021QK年美好奇妙夜，用自己积极的生活态度让你相信，世界有你更美好</div> -->
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				splashlogo:'/static/abc_bai_logo.png',
				src: 'https://dscontract.oss-cn-beijing.aliyuncs.com/1.mp4',
				winWid: 0,
				windH: 0,
				W: 0
			};
		},
		methods: {
			GoHome: function(e) {
				// console.log('ggggggg')
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		},
		onShow() {
			let whr = 0.5647
			this.windH = wx.getSystemInfoSync().windowHeight; //获取当前屏幕的高度  this.windH = wx.getSystemInfoSync().windowHeight;
			this.winWid = this.windH * whr; //获取当前屏幕的宽度			   
			console.log('this.winWid', wx.getSystemInfoSync(), this.winWid, this.H)
		},
	}
</script>

<style lang="scss">
	.swiper-item {
		height: 100vh;
		width: 100vw;
		position: relative;
	}

	.video {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.page {
		position: relative;
		-ms-scroll-chaining: none;
		overscroll-behavior: none;
		width: 100vw;
		height: 100vh;
		-webkit-overflow-scrolling: touch;
		// pointer-events: none;
	}

	.page .logo {
		position: absolute;
		z-index: 10;
		left: 10px;
		top: 40px;
	}

	.swiper-wrapper {
		position: absolute;
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
		top: 0;
		z-index: 0;
		overflow-y: hidden;
	}

	.swiper-wrapper .swiper-slide {
		position: absolute;
		width: 100vw;
		height: 100vh;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: top 500ms;
		-moz-transition: top 500ms;
		transition: top 500ms;
	}

	.swiper-wrapper .swiper-slide image {
		// height: 100vh;
	}

	.swiper-wrapper .swiper-slide .text {
		position: absolute;
		top: 0;
		z-index: 500;
		padding-top: 90px;
		padding-left: 43px;
		padding-right: 43px;
		text-align: center;
	}

	.swiper-wrapper .swiper-slide .text .title {
		font-style: normal;
		font-weight: bold;
		font-size: 30px;
		line-height: 35px;
		color: #fff;
	}

	.swiper-wrapper .swiper-slide .text .line {
		height: 1px;
		background: #fff;
		margin-top: 12px;
		font-size: 16px;
		margin-bottom: 8px;
		opacity: .1;
	}

	.swiper-wrapper .swiper-slide .text .desc {
		font-weight: 500;
		line-height: 24px;
		text-align: justify;
		font-size: 14px;
		color: #fff;
		opacity: .7;
	}

	.page .btnwrapper {
		position: absolute;
		z-index: 10;
		width: 100%;
		padding: 0px 25%;
		bottom: 50px;
	}

	.btnwrapper .btn {

		background: #AE00ff;
		// border: 2px solid #fff;
		border-radius: 25px;
		letter-spacing: 1px;
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 17px;
		color: #fff;
		text-align: center;
        z-index: 999;
	}
</style>
